<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用信管帮APP</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            background: #fff;/*#2493f1*/
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            position: relative;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            perspective: 24.1546rem;
        }
        
        section{/*
            border: 1px solid red;*/
            border-top-left-radius:  .3623rem;
            border-top-right-radius:  .3623rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }
        @keyframes switchPage {
            0%{
                opacity: 1;
                transform: rotateY(0deg);
            }
            50%{
                opacity: 0;
                transform: rotateY(90deg);
            }
            100%{
                opacity: 1;
                transform: rotateY(0deg);
            }
        }
        section .content{
            width: 100%;
            flex: 1;
            overflow: hidden;
        }


        body header .title{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 7rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: .5556rem;
            font-size: .4106rem;
            font-weight: 600;
            letter-spacing: .025rem;
            position: absolute;
            /* bottom: .3382rem; */
            left: 50%;
            transform: translateX(-3.5rem);
        }
        .van-loading{
            width: .4831rem;
            height: .4831rem;
            margin-right: .1208rem;
        }
    </style>
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="../../css/footer.css">
    <link rel="stylesheet" href="./css/search.css">
    <link rel="stylesheet" href="./css/msgul.css">
    <link rel="stylesheet" href="./css/friendul.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css" referrerpolicy="no-referrer"/>
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/axios.js"></script>
    <script src="../../lib/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js" referrerpolicy="no-referrer"></script>
    
    
</head>
<body>
    <section @click="closeNavBar()">
        <!-- header -->
        <header>
            <span class="title title1" v-show="loading">
                <template>
                    <van-loading color="#bebebe"/>
                </template>
                接收中...
            </span>
            <span class="title title2" v-show="!loading" @click.stop="SwitchPage()">
                {{active == 0 ? "消息" : "帮友"}}
            </span>
            <div class="right" @click.stop="addTab()"></div>
            <!-- <div class="zz"> -->
                <div class="navbox" v-if="isAddShow">
                    <div></div>
                    <ul class="nav">
                        <li @click.stop="select(0)" index="0">
                            <div class="icon"></div>
                            <div class="textBox">
                                <span class="text">发起群聊</span>
                            </div>
                        </li>
                        <li @click.stop="select(1)" index="1">
                            <div class="icon"></div>
                            <div class="textBox">
                                <span class="text">添加朋友</span>
                            </div>
                        </li>
                        <li @click.stop="select(2)" index="2">
                            <div class="icon"></div>
                            <div class="textBox">
                                <span class="text">扫一扫</span>
                            </div>
                        </li>
                        <li @click.stop="select(3)" index="3">
                            <div class="icon"></div>
                            <div class="textBox">
                                <span class="text">收付款</span>
                            </div>
                        </li>
                    </ul>
                </div>
            <!-- </div> -->
            
        </header>
        
        <div class="content">
            <!-- 搜索框 -->
            <div>
                <van-search v-model="search_value" :show-action="showAction" placeholder="搜索" @search="onSearch" @cancel="onCancel" @focus="onFocus"/>
            </div>
            <!-- 消息列表 -->
            <ul class="msgul ul1" v-show="active == 0">
                <li v-for="(item, index) of msgList" @click="read(index, item.Group.GroupID, item.Group.GroupName, item.isRead)" :index="index" :gid="item.Group.GroupID">
                    <div class="top">
                        <div class="left">
                            <!-- 群头像 -->
                            <div class="groupImg">
                                <div class="userImg">
                                    <img v-show="item.Group.GroupImg !== ''" :src="item.Group.GroupImg" alt="">
                                    <div v-show="item.Group.GroupImg === ''" class="textImg" :type="item.Group.GroupType">{{item.Group.GroupName.slice(0, 1)}}</div>
                                </div>
                                <!-- 标记符 -->
                                <div v-show="!item.isRead" class="mark"></div>
                            </div>
                            
                            <div class="info">
                                <span class="name">{{item.Group.GroupName}}</span>
                                <span class="msg" >{{`${item.sender.SenderName == "" ? "无名用户": item.sender.SenderName}：${item.Content}`}}</span>
                            </div>
                        </div>
                        <div class="right">
                            {{item.time | handleTime}}
                        </div>

                    </div>
                    <hr class="bottom">
                </li>
                <!-- 刚开始编辑 -->
                <li v-for="(item, index) of friendMsgList" @click="(item.to == userid) ? read2(index, item.from, item.read) : read2(index, item.to)" :index="index">
                    <div class="top">
                        <div class="left">
                            <!-- 群头像 -->
                            <div class="groupImg">
                                <div class="userImg">
                                    <img :src="(item.to == userid) ? (idToinfo(item.from).userImg == '' ? './img/defaultUserImg.webp' : idToinfo(item.from).userImg) : (idToinfo(item.to).userImg == '' ? './img/defaultUserImg.webp' : idToinfo(item.to).userImg)" alt="">
                                </div>
                                <!-- 标记符 -->
                                <div v-show="!item.read" class="mark"></div>
                            </div>
                            
                            <div class="info">
                                <span class="name">{{((item.to == userid) ? idToinfo(item.from).note : idToinfo(item.to).note) == "" ? '无名用户' : ((item.to == userid) ? idToinfo(item.from).note : idToinfo(item.to).note)}}</span>
                                <span class="msg" >{{item.Content}}</span>
                            </div>
                        </div>
                        <div class="right">
                            {{item.time | handleTime}}
                        </div>

                    </div>
                    <hr class="bottom">
                </li>
            </ul>

            <!-- 好友列表 -->
            <ul class="friendul ul2" v-show="active == 1">
                <!-- 新的朋友 -->
                <li class="newFriend" @click="newFriend()">
                    <div class="top">
                        <div class="left">
                            <!-- 头像 -->
                            <div class="img">
                                    <img src="./img/xindepengyou.webp" alt="">
                            </div>
                            <!-- 备注 -->
                            <span class="name">{{applicantList.length == 0 ? '新的朋友' : `${applicantList[0].name} 申请添加好友`}}</span>
                        </div>
                        <div class="right" v-show="applicantList.length != 0">{{applicantList.length}}</div>
                    </div>
                    <hr class="bottom">
                </li>
                <!-- <span class="title">交流圈/群聊</span> -->
                <li>
                    <div class="top">
                        <div class="left">
                            <!-- 头像 -->
                            <div class="img">
                                    <img src="./img/jiaoliuquan.webp" alt="">
                            </div>
                            <!-- 备注 -->
                            <span class="name">交流圈</span>
                        </div>
                    </div>
                    <hr class="bottom">
                </li>
                <li>
                    <div class="top">
                        <div class="left">
                            <!-- 头像 -->
                            <div class="img">
                                    <img src="./img/qunliao.webp" alt="">
                            </div>
                            <!-- 备注 -->
                            <span class="name">群聊</span>
                        </div>
                    </div>
                    <hr class="bottom">
                </li>
                <span class="title">帮友</span>
                <li v-for="(item, index) in friendList" :index="index" @click="readFriend(index, item.userid)">
                    <div class="top">
                        <div class="left">
                            <!-- 头像 -->
                            <div class="img">
                                    <img :src="item.userImg == '' ? './img/defaultUserImg.webp' : item.userImg" alt="">
                            </div>
                            <!-- 备注 -->
                            <span class="name">{{item.note}}</span>
                        </div>
                    </div>
                    <hr class="bottom">
                </li>
            </ul>
        </div>
        
            
        
    </section>
    <footer>
        <!-- 首页 -->
        <a class="nav" href="../index/index.html">
            <div class="icon"></div>
            <span>首页</span>
        </a>
        <!-- 广场 -->
        <a class="nav" href="../guangchang/guangchang.html">
            <div class="icon"></div>
            <span>广场</span>
        </a>
        <!-- 游戏 -->
        <a class="nav active" href="../data/data.html">
            <div class="icon"></div>
            <span>帮友</span>
        </a>
        <!-- 我 -->
        <a class="nav" href="../person/person.html">
            <div class="icon"></div>
            <span>我</span>
        </a>


    </footer>

    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js" referrerpolicy="no-referrer"></script>
    <script src="./js/main.js"></script>
    <script>
        document.addEventListener('visibilitychange',
        function(){
            if(document.visibilityState === "visible"){
                setTimeout(()=>{
                    vm.loading = true
                    location.reload()
                }, 1)
            }
        }
        )
    </script>
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>